<template>
  <basic-container>
    <div class="container-body">
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <el-row>
          <el-form-item label="会议名称:">
            <el-input v-model="query.meetingName" clearable placeholder="项目名称" size="small"></el-input>
          </el-form-item>
          <el-form-item label="会议地址:">
            <el-input v-model="query.meetingLocation" clearable placeholder="会议地址" size="small"></el-input>
          </el-form-item>
          <el-form-item label="会议日期:">
            <el-date-picker placement="bottom-start" clearable v-model="query.meetingDate" value-format="yyyy-MM-dd" placeholder="选择会议日期">
            </el-date-picker>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="项目编号:">
            <el-input v-model="query.projectCode" clearable placeholder="项目编号" size="small"></el-input>
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="query.projectName" clearable placeholder="项目名称" size="small"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" @click="onSearch" :loading="loading">搜索
            </el-button>
            <el-button size="small" icon="el-icon-delete" @click="searchReset" :loading="loading">清空</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <div class="btn-operate">
        <el-button @click="showAddView" type="primary" size="small" icon="el-icon-plus">
          会议记录
        </el-button>
      </div>
      <el-table header-row-class-name="container-table-header" :data="data" size="small"
                highlight-current-row @cell-click="handleCellClick" style="width: 100%;margin-bottom: 20px;"
                row-key="id" border stripe v-loading="loading">
        <el-table-column label="项目编号" prop="projectCode" width="140">
        </el-table-column>
        <el-table-column label="项目名称" prop="projectName" width="270">
          <template v-slot="scope">
            <span :style="{ color: scope.row.projectProgress === 7 ? '#f16262' : '' }">
              {{ scope.row.projectName }}
              <template v-if="scope.row.projectProgress === 7">
                <div style="display: inline-block">【已终止】</div>
              </template>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="meetingName" label="会议名称">
        </el-table-column>
        <el-table-column prop="meetingLocation" label="会议地点">
        </el-table-column>
        <el-table-column prop="meetingDate" label="会议日期" width="200">
        </el-table-column>
        <el-table-column prop="auditStatus" label="审批状态:">
          <template slot-scope="scope">
            <el-tag :type="scope.row.auditStatus | auditStatusTag">{{ scope.row.auditStatus | auditStatus }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="170">
          <template slot-scope="scope">
            <el-button v-if="permissions.engineering_meeting_get" type="text" size="small" icon="el-icon-view" @click="showViewBox(scope.row)">查看</el-button>
            <el-button v-if="permissions.engineering_meeting_add && (scope.row.auditStatus === 0 || scope.row.auditStatus === 2)" type="text" size="small" icon="el-icon-edit" @click="showEditBox(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.taskId" type="text" size="small" icon="el-icon-edit" @click="showTaskAuditTaskDialog(scope.row)">审批</el-button>
            <el-button v-if="scope.row.auditStatus > 0" type="text" size="small" icon="el-icon-view" @click="showTaskAuditLogDialog(scope.row)">审批日志</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="container-page">
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="page.current"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </div>

    <el-dialog :title="formTitle" fullscreen custom-class="ledger" :visible.sync="formBox" :close-on-click-modal="!formBox" :append-to-body="true" :before-close="resetForm" width="1200px" top="5vh">
      <el-form ref="optForm" :model="form" label-width="90px">
        <el-row>
          <el-col :span="6">
            <el-form-item label-width="110px" label="记录人: ">
              {{ form.recorder }}
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label-width="100px" label="记录日期:">
              <el-date-picker placement="bottom-start" v-model="form.recordingDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="会议类型:">
              {{ form.meetingType }}
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title">项目信息</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label-width="110px" label="项目名称:" prop="projectName" :rules="{required: true, message: '项目名称不能为空', trigger: ['focus', 'change']}">
              <el-input v-model="form.projectName" placeholder="单击选择项目" @focus="showProjectDialog()" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title">会议信息</div>
        <el-row>
          <el-col :span="6">
            <el-form-item label-width="110px" label="主持人:">
              <el-input v-model="form.compere" @focus="showTransferDialog(['compereId','compere'], 'auditUser', false)" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label-width="100px" label="会议日期:">
              <el-date-picker placement="bottom-start" v-model="form.meetingDate" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label-width="100px" label="会议名称:">
              <el-input v-model="form.meetingName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label-width="110px" label="会议地点:">
              <el-input v-model="form.meetingLocation"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="13">
            <el-form-item label-width="110px" label="校内人员:" prop="meetingAttendees" :rules="{required: true, message: '参会人员不能为空', trigger: ['focus', 'change']}">
              <el-input v-model="form.meetingAttendees" @focus="showTransferDialog(['meetingAttendeesIds','meetingAttendees'], 'users', true, [form.auditCompanyId, form.assistCompanyId, form.auditedCompanyId])" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label-width="100px" label="校外人员:" prop="meetingAttendees">
              <el-input v-model="form.meetingInvitees"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="13">
            <el-form-item label-width="110px" label="主送单位:">
              <el-input v-model="form.primaryRecipient" @focus="showTransferDialog(['primaryRecipientId','primaryRecipient'], 'company', true)" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label-width="100px" label="抄送单位:">
              <el-input v-model="form.ccRecipient" @focus="showTransferDialog(['ccRecipientId','ccRecipient'], 'company', true)" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title">会议记录</div>
        <el-row>
          <el-col>
            <el-form-item label-width="110px" label="会议纪要:">
              <el-input v-model="form.meetingMinutes" :autosize="{ minRows: 2}" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm" size="small" icon="el-icon-close">关闭</el-button>
        <el-button @click="submit" type="primary" size="small" icon="el-icon-check">保存</el-button>
        <el-button @click="submitAudit" type="primary" size="small" icon="el-icon-check">保存送审</el-button>
      </span>
    </el-dialog>

    <el-dialog top="5vh" :title="formTitle" :visible.sync="viewBox"
               :append-to-body="true" :before-close="closeViewBox" width="1200px">
      <MeetingAuditView :params="form"></MeetingAuditView>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeViewBox" size="small" icon="el-icon-close">关闭</el-button>
      </span>
    </el-dialog>

    <FormTransfer :transferDialog="transferDialog" :transferDialogType="transferDialogType" :multiple="transferDialogMultiple" @transferData="transferDataHandle" @closeTransfer="closeTransfer" :transferCurrent="transferCurrent" />
    <ChoseProject ref="ChoseProject" :projectDialog="projectDialog" @cancelDialog="closeProjectDialog" @setValue="projectDataHandle"/>
    <TaskAuditDialog :dialog="taskAuditDialog" @setValue="setTaskAuditTaskDialog" @closeDialog="closeTaskAuditTaskDialog" ref="taskAuditDialog" />
    <TaskAuditLogDialog :dialog="taskAuditLogDialog" :process-id="processId" @closeDialog="closeTaskAuditTaskLogDialog"/>
  </basic-container>
</template>

<script>
import {mapGetters} from "vuex";
import Tinymce from '@/components/Tinymce'
import {delObj, fetchList, getObj, submit, submitAudit} from "@/api/adis/execute/minutes";
import FormTransfer from "@/components/form/transfer";
import ChoseProject from "@/components/audited/ChoseProject";
import MeetingAuditView from "@/components/actForm/MeetingAuditView.vue";
import TaskAuditLogDialog from "@/components/act/TaskAuditLogDialog.vue";
import TaskAuditDialog from "@/components/act/TaskAuditDialog.vue";


export default {
  showEdit: {
  },
  components: {
    TaskAuditDialog,
    TaskAuditLogDialog,
    Tinymce,
    FormTransfer,
    ChoseProject,
    MeetingAuditView,
  },
  dictTypes: ['audit_type','audit_status'],
  data() {
    return {
      importBox: false,
      viewBox: false,
      formBox: false,
      formTitle: '',
      loading: false,
      query: {},
      form: {},
      page: {
        size: 10,
        current: 1,
        total: 0
      },
      data: [],
      selectionRow: [],
      fileList: [], // 文件
      projectDialog: false,
      transferDialog: false,
      transferDialogType: '',
      transferDialogTypeArr: [],
      transferDialogMultiple: false,
      transferCurrent: {},
      processId : '',
      taskAuditDialog: false,
      taskAuditLogDialog: false,

    }
  },
  computed: {
    ...mapGetters(["permissions", 'userInfo'])
  },
  created() {
    this.onLoad(this.page);
  },
  methods: {
    handleCellClick(row, column) {
      if (row && column.label !== "操作"){
        this.showViewBox(row)
      }
    },

    submit() {
      this.$refs['optForm'].validate((valid) => {
        if (valid) {
          this.loading = true;
          submit(this.form).then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.resetForm();
            this.onLoad(this.page);
          }, () => {
            this.loading = false;
          });
        } else {
          return false;
        }
      });
    },
    submitAudit() {
      this.$refs['optForm'].validate((valid) => {
        if (valid) {
          this.loading = true;
          submitAudit(this.form).then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.resetForm();
            this.onLoad(this.page);
          }, () => {
            this.loading = false;
          });
        } else {
          return false;
        }
      });
    },

    showAddView() {
      this.form = {
        recorder: this.userInfo.realname,
        recorderId: this.userInfo.userId,
        recordingDate: new Date().toISOString(),
        meetingType:'工程会议',
      };
      this.formTitle = '工程会议记录';
      this.formBox = true;
    },
    showEditBox(row) {
      getObj(row.meetingId).then((res) => {
        this.form = res.data.data;
        this.formTitle = this.form.meetingName;
        this.formBox = true;
      });
    },
    showViewBox(row) {
      getObj(row.meetingId).then((res) => {
        this.form = res.data.data;
        this.formTitle = this.form.meetingName;
        this.viewBox = true;
      });
    },
    closeViewBox() {
      this.viewBox = false;
    },
    resetForm() {
      this.formBox = false;
      this.printBox = false;
      this.form = {};
      this.formTitle = '';
      this.$refs['optForm'] && this.$refs['optForm'].resetFields();
    },
    onSearch() {
      this.page.current = 1;
      this.onLoad(this.page);
    },
    searchReset() {
      this.query = {};
      this.page.current = 1;
      this.onLoad(this.page);
    },
    currentChange(current) {
      this.page.current = current;
      this.onLoad(this.page);
    },
    sizeChange(size) {
      this.page.size = size;
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      this.query.isEngineering = true;
      fetchList(Object.assign(params, this.query, page)).then(res => {
        this.loading = false;
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
      }, () => {
        this.loading = false;
      });
    },

    // 审计对象选择

    showTransferDialog(transferDialogArr, transferDialogType, transferDialogMultiple, transferDialogQuery) {
      this.transferDialogArr = transferDialogArr; // 表单字段
      this.transferDialogType = transferDialogType; // 判断类型user:人员，unit:职位，department:部门,company:单位,plan:计划等
      this.transferDialogMultiple = transferDialogMultiple; // 是否多选
      if (transferDialogType === 'users') {
        if(transferDialogQuery.filter(item => item).length < 2) {
          this.$message({
            type: "warning",
            message: "请先选择项目!"
          });
          return
        }
        this.transferCurrent.deptIds = transferDialogQuery;
      }
      //重组数组name和id
      this.transferCurrent.currentval = []
      if(this.form[transferDialogArr[0]]) {
        if (this.form[transferDialogArr[0]].indexOf(',') > -1) {
          this.form[transferDialogArr[0]].split(',').forEach((item, i) => {
            this.transferCurrent.currentval.push({name: this.form[transferDialogArr[1]].split(',')[i], id: item})
          })
        } else {
          this.transferCurrent.currentval = [{name: this.form[transferDialogArr[1]], id: this.form[transferDialogArr[0]]}]
        }
      }
      this.transferDialog = true;
    },
    transferDataHandle(e) {
      this.transferDialog = false
      let currentval = [], currentLabel = []
      if (e.list.length > 0) {
        if (e.list.length > 1) {
          e.list.forEach(item => {
            currentval.push(item.id)
            currentLabel.push(item.name)
          })
        } else {
          currentval = [e.list[0].id]
          currentLabel = [e.list[0].name]
        }
        this.$set(this.form, this.transferDialogArr[0], currentval.join(','))
        this.$set(this.form, this.transferDialogArr[1], currentLabel.join(','))
      } else { // 如果返回的数据为空，也将当前页面数值清空
        this.$set(this.form, this.transferDialogArr[0], '')
        this.$set(this.form, this.transferDialogArr[1], '')
      }
      this.transferDialogType = ''
    },
    closeTransfer() {
      this.transferDialog = false;
    },

    showProjectDialog() {
      this.projectDialog = true
      this.$nextTick(() => {
        this.$refs.ChoseProject.initParams({isGCProjectApproved: true,isEngineering: true, isTermination: false});
      })
    },
    closeProjectDialog() {
      this.projectDialog = false
    },
    projectDataHandle(row) {
      this.projectDialog = false
      this.$set(this.form, "projectId", row.projectId);
      this.$set(this.form, "projectName", row.projectName);
      this.$set(this.form, "auditCompanyId", row.auditCompanyId);
      this.$set(this.form, "assistCompanyId", row.assistCompanyId);
      this.$set(this.form, "auditedCompanyId", row.auditedCompanyId);
    },

    /**=========审批相关==begin===========*/
    showTaskAuditTaskDialog(row) {
      this.taskAuditDialog = true;
      this.$refs['taskAuditDialog'].initData({taskId: row.taskId, processId: row.processId});
    },
    closeTaskAuditTaskDialog() {
      this.taskAuditDialog = false;
    },
    setTaskAuditTaskDialog() {
      this.taskAuditDialog = false;
      this.onLoad(this.page);
    },
    showTaskAuditLogDialog(row) {
      this.processId = row.processId;
      this.taskAuditLogDialog = true;
    },
    closeTaskAuditTaskLogDialog() {
      this.taskAuditLogDialog = false;
    },
    /**=========审批相关==end===========*/
  }
};
</script>

<style>
</style>
